<template>
  <div>
    <!-- <a href="."></a>
    <i class="iconfont icon-marker"></i> -->
    <div class="draw-svg">
      <v-stage ref="stage" :config="stageConfig" @click="handleClick" @wheel="wheelWatch">
        <v-layer ref="layer">
          <v-image
            :config="{
            image: background,width: 960,height: 860,x:20,y:20
          }"
          />
          <v-group
            @click="iconClick"
            @mouseover="iconHover"
            @dragend="iconDragend"
            v-for="(item,index) in list"
            :key="index"
            :config="{ draggable: true}"
            :ref="index"
          >
            <v-circle
              :x="item.x"
              :y="item.y"
              :config="{radius: 50, fill: 'green',width:26,height:26}"
            ></v-circle>
            <v-sprite
              :config="{ image: sprite,animation:'standing',animations:{standing:[48, 0, 16, 16]},x : item.x-8, y: item.y-8}"
            ></v-sprite>
            <!-- <v-text :config="{x : item.x, y: item.y+40,text:testText}"></v-text> -->
          </v-group>
          <!-- <v-image
            :config="{
            image: image,x : item.x, y: item.y, radius: 50,width:20,height:20
          }"
            :key="item.id"
          />-->
        </v-layer>
      </v-stage>
    </div>
  </div>
</template>

<script>
// const width = window.innerWidth;
// const height = window.innerHeight;
const scaleBy = 1.13;

export default {
  data() {
    return {
      list: [{ x: 10, y: 10, radius: 50, fill: "blue" }],
      stageConfig: {
        width: 1000,
        height: 900
      },
      backgroundDiv: {
        // backgroundImage: "url(" + require("@/assets/test.svg") + ")",
        backgroundImage:
          "url(http://39.108.133.62:8002/kodexplorer/data/User/admin/home/document/1587029235133_1587029181(1).jpg)",
        backgroundRepeat: "no-repeat",
        backgroundPosition: "center"
      },
      background: null,
      sprite: null,
      testText: "testStr"
    };
  },
  created() {
    const background = new window.Image();
    background.src = require("@/assets/test.svg");
    background.onload = () => {
      this.background = background;
    };
    const sprite = new window.Image();
    sprite.src = require("@/assets/basficon.png");
    sprite.onload = () => {
      this.sprite = sprite;
    };
  },
  methods: {
    handleClick(evt) {
      const stage = evt.target.getStage();
      const pos = stage.getPointerPosition();
      // console.log("stagepos:" + pos.x + "," + pos.y);
      this.list.push(pos);
    },

    iconClick(evt) {
      const stage = evt.target.getStage();
      const pos = stage.getPointerPosition();
      // console.log("clickpos:" + pos.x + "," + pos.y);
    },

    iconHover(evt) {
      console.log("iconHover");
      const stage = evt.target.getStage();
      const pos = stage.getPointerPosition();
      // console.log("Hoverpos:" + pos.x + "," + pos.y);
    },

    iconDragend() {
      console.log("iconDragend");
      // const stage = evt.target.getStage();
      // const pos = stage.getPointerPosition();
      let stage = this.$refs["stage"].getStage();
      let pos = stage.pointerPos;
      // this.list.push(pos);
      // console.log("Dragendpos:" + pos.x + "," + pos.y);
    },

    wheelWatch(evt) {
      console.log("wheel");
      console.log(evt);
      const stage = evt.target.getStage();
      var oldScale = stage.scaleX();
      var mousePointTo = {
        x: stage.getPointerPosition().x / oldScale - stage.x() / oldScale,
        y: stage.getPointerPosition().y / oldScale - stage.y() / oldScale
      };

      let newScale = Math.max(
        1,
        evt.deltaY > 0 ? oldScale * scaleBy : oldScale / scaleBy
      );

      stage.scale({ x: newScale, y: newScale });

      var newPos = {
        x:
          -(mousePointTo.x - stage.getPointerPosition().x / newScale) *
          newScale,
        y:
          -(mousePointTo.y - stage.getPointerPosition().y / newScale) * newScale
      };
      stage.position(newPos);
      stage.batchDraw();
    },

    load() {
      localStorage.clear();
      const data = localStorage.getItem("storage") || "[]";
      this.list = JSON.parse(data);
    },

    save() {
      localStorage.setItem("storage", JSON.stringify(this.list));
    }
  },
  mounted() {
    this.load();
  }
};
</script>

<style scoped>
.draw-svg {
  width: auto;
  height: auto;
  overflow: hidden;
}
</style>